<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
     style="{width:720px;}">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="" label-width="30%" >
      <el-form-item label="品牌名" prop="name">
        <el-input v-model="dataForm.name" placeholder="品牌名" ></el-input>
      </el-form-item>
      <el-form-item label="品牌logo地址" prop="logo">
<!--        <el-input v-model="dataForm.logo" placeholder="品牌logo地址" ></el-input>-->
        <single-upload v-model="dataForm.logo"></single-upload>
      </el-form-item>
      <el-form-item label="介绍" prop="descript" >
        <el-input v-model="dataForm.descript" placeholder="介绍" ></el-input>
      </el-form-item>
      <el-form-item label="显示状态" prop="showStatus">
        <el-switch v-model="dataForm.showStatus" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="第一檢索字符" prop="firstLetter">
        <el-input v-model="dataForm.firstLetter" placeholder="第一檢索字符" ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="dataForm.sort" type="number" placeholder="排序" ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import singleUpload from '@/components/upload/singleUpload'
  import brandService from '@/api/product/brand.js'
  export default {
    components: {singleUpload},
    prop: [],
    data() {
      var checkFirstLetter = (rule, value, callback)=> {
        if( value === '') {
          callback(new Error('首字母必须填写'))
        }else if ( !/^[a-zA-Z]$/.test(value)) {
          callback(new Error('首字母必须是A-Z 或者 a-z'))
        }
        callback()
      }
      var checkSort = (rule, value, callback)=> {
        if( value === '') {
          callback(new Error('排序字段必须填写'))
        } else if ( !/^[1-9]\d*|0$/.test(value) || value < 0) {
          console.log(value)
          callback(new Error('必须是一个不小于0的整数'))
        }
        callback()
      }
      return {
        dataForm: {
          brandId: '',
          name: '',
          logo: '',
          descript: '',
          showStatus: '',
          firstLetter: '',
          sort: 0
        },
        visible: false,
        dataRule: {
          name: [
            { required: true, message: '品牌名不能为空', trigger: 'change' }
          ],
          logo: [
            { required: true, message: '品牌logo地址不能为空', trigger: 'change' }
          ],
          descript: [
            { required: true, message: '介绍不能为空', trigger: 'change' }
          ],
          showStatus: [
            { required: true, message: '显示状态[0-不显示；1-显示]不能为空', trigger: 'change' }
          ],
          firstLetter: [
            {validator: checkFirstLetter,trigger: 'change'},
            {required:true, message: '首字母必须填写', trigger: 'change'}
          ],
          sort: [
            {validator: checkSort, trigger: 'change'},
            {required:true, message: '排序必须填写', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      init(id) {
        this.dataForm.brandId = id || 0
        this.visible = true
        this.$nextTick(() => {
          // 重置表单字段和校验结果
          this.$refs["dataForm"].resetFields();
          console.log('resetFields后', this.dataForm)
          if(this.dataForm.brandId) {
            brandService.get(this.dataForm.brandId).then(({data}) => {
              console.log('更新前获取数据',data)
              if (data && data.code === 0) {
                this.dataForm = {...data.data}
              }
            });
          }
        })
      },
      dataFormSubmit() {
        this.$refs["dataForm"].validate(valid => {
          if(valid) {
            let data = {
              brandId: this.dataForm.brandId || undefined,
              name: this.dataForm.name,
              logo: this.dataForm.logo,
              descript: this.dataForm.descript,
              showStatus: this.dataForm.showStatus,
              firstLetter: this.dataForm.firstLetter,
              sort: this.dataForm.sort
            }
            brandService.saveOrUpdate(data,!this.dataForm.brandId ? 'save' : 'update').then(({data})=>{
              if ( data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: ()=> {
                    this.visible = false
                    this.$emit("refreshDataList")
                  }
                })
              } else {
                this.$message.error(data.msg);
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  >>> .el-dialog {
    width: 30%
  }
  >>> input.el-input__inner{
    outline-style: none ;
    width: 80%
  }
  export default {

  }
</style>
